<!-- components/ThemeSwitcher.svelte -->
<script lang="ts">
	import {
		themeStore,
		currentTheme,
		colorMappings,
		currentLayout,
		themeColorConfig,
		COLOR_NAME_MAP,
		basePalettes,
		type PaletteName,
		type ColorType
	} from '$lib/stores/theme';
	import Divider from '$lib/components/Basic/Divider/Divider.svelte';
	import RadioGroup from '$lib/components/Form/Radio1/RadioGroup.svelte';
	import RadioButton from '$lib/components/Form/Radio1/RadioButton.svelte';
	import Collapse from '$lib/components/Data/Collapse/Collapse.svelte';
	import CollapseItem from '$lib/components/Data/Collapse/CollapseItem.svelte';
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';

	export let isLayoutOpen = true;

	// 获取当前主题和颜色映射
	let theme = $currentTheme;
	let mappings = $colorMappings;
	let layout = $currentLayout;

	// 监听主题变化
	currentTheme.subscribe((value) => {
		theme = value;
	});

	// 监听颜色映射变化
	colorMappings.subscribe((value) => {
		mappings = value;
	});

	// 监听布局变化
	currentLayout.subscribe((value) => {
		layout = value;
	});

	// 切换light/dark主题
	const handleThemeChange = (newTheme: 'light' | 'dark') => {
		themeStore.switchTheme(newTheme);		
	};

	// 切换颜色映射
	const handleColorPaletteChange = (
		colorType: keyof typeof themeColorConfig,
		palette: PaletteName
	) => {
		themeStore.switchColorPalette(colorType, palette);
	};

	const handleLayoutChange = (newLayout: 'left' | 'top' | 'mixed') => {
		themeStore.switchLayoutMode(newLayout);		
	};

	let activeItems = [''];
</script>

<div class="theme-switcher">
	<!-- 切换light/dark主题 -->
	<div class="theme-mode-switcher">
		<div class="title-container">
			<Divider></Divider>
			<div class="title-content">主题模式</div>
			<Divider></Divider>
		</div>
		<div class="model-container">
			<RadioGroup bind:modelValue={theme} onChange={handleThemeChange} className="button">
				<RadioButton value="light" label="明亮模式">
					<span class="radio-group-item">
						<Icon src="weather/sun" size="16"></Icon>						
						<span>明亮模式</span>
					</span>
				</RadioButton>
				<RadioButton value="dark" label="暗黑模式">
					<span class="radio-group-item">
						<span>
							<Icon src="weather/moon" size="16"></Icon>
						</span>
						<span>暗黑模式</span>
					</span>
				</RadioButton>
			</RadioGroup>
		</div>
	</div>
	{#if isLayoutOpen}
	<div class="theme-mode-switcher">
		<div class="title-container">
			<Divider></Divider>
			<div class="title-content">布局模式</div>
			<Divider></Divider>
		</div>
		<div class="model-container">
			<div
				class="layout-item"
				class:active={layout === 'left'}
				on:click={() => handleLayoutChange('left')}
				on:keydown={() => {}}
				role="button"
				tabindex="0"
			>
				<div class="layout-sider" style="background-color:var(--color-info-400)"></div>
				<div class="vertical-wrapper">
					<div class="layout-header" style="background-color:var(--color-info-300)"></div>
					<div class="layout-main"></div>
				</div>
			</div>
			<div
				class="layout-item flex-col"
				class:active={layout === 'top'}
				on:click={() => handleLayoutChange('top')}
				on:keydown={() => {}}
				role="button"
				tabindex="0"
			>
				<div class="layout-header" style="background-color:var(--color-info-400)"></div>
				<div class="layout-main"></div>
			</div>
			<div
				class="layout-item flex-col"
				class:active={layout === 'mixed'}
				on:click={() => handleLayoutChange('mixed')}
				on:keydown={() => {}}
				role="button"
				tabindex="0"
			>
				<div class="layout-header" style="background-color:var(--color-info-400)"></div>
				<div class="horizontal-wrapper">
					<div class="layout-sider" style="background-color:var(--color-info-400)"></div>
					<div class="layout-main"></div>
				</div>
			</div>
		</div>
	</div>
	{/if}
	<div class="theme-mode-switcher">
		<div class="title-container">
			<Divider></Divider>
			<div class="title-content">主题颜色</div>
			<Divider></Divider>
		</div>
		<div class="model-container flex-col">
			<Collapse bind:modelValue={activeItems} accordion={true}>
				{#each Object.entries(themeColorConfig) as [colorType, palettes]}
					<CollapseItem name={colorType} title="">
						{#snippet titleSlot()}
							<div class="color-palette-title">
								<div class="select-color" style="{`background-color:var(--color-${colorType}-500)`}"></div>
								{COLOR_NAME_MAP[colorType as ColorType]} ( {colorType} )
							</div>
						{/snippet}
						<div class="color-palette-switcher">
							<Divider margin="0"></Divider>
							<div class="palette-options">
								{#each palettes as palette}
									<div
										class="theme-palette-btn"
										style="{`background-color: ${basePalettes[palette][theme]['500']}`}"
										class:active={mappings[colorType as keyof typeof mappings] === palette}
										on:click={() =>
											handleColorPaletteChange(colorType as keyof typeof themeColorConfig, palette)}
										on:keydown={() => {}}
										role="button"
										tabindex="0"
									>								
										{palette}
										<div>
											{mappings[colorType as keyof typeof mappings] === palette?"✔":""}
										</div>
									</div>
								{/each}
							</div>
						</div>
					</CollapseItem>
				{/each}
			</Collapse>
		</div>		
	</div>
</div>

<style scoped lang="scss">
	.theme-switcher {
		padding: 0 10px;
	}
	.theme-mode-switcher {
		margin-top: 10px;
	}
	.title-container {
		display: flex;
		align-items: center;
		gap: 10px;
		.title-content {
			width: 200px;
			display: flex;
			justify-content: center;
			font-size: 14px;
		}
	}

	.model-container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px 5px;
		gap: 15px;
	}

	.layout-item {
		width: 100px;
		height: 70px;
		border-radius: var(--border-radius);
		border: 2px solid var(--color-border);
		padding: 6px;
		display: flex;
		gap: 6px;
		cursor: pointer;
		&:hover {
			border-color: var(--color-info-500);
		}
	}
	.layout-item.active {
		border-color: var(--color-info-500);
	}
	.flex-col {
		flex-direction: column;
	}

	.vertical-wrapper {
		display: flex;
		flex-direction: column;
		flex: 1 1 0%;
		gap: 6px;
	}
	.horizontal-wrapper {
		display: flex;
		flex: 1 1 0%;
		gap: 6px;
	}
	.layout-sider {
		width: 18px;
		height: 100%;
		border-radius: 4px;
	}
	.layout-header {
		height: 16px;
		border-radius: 4px;
	}
	.layout-main {
		flex: 1 1 0%;
		border-radius: 4px;
		background-color: var(--color-info-300);
	}

	.radio-group-item {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 100%;
	}

	.color-palette-switcher{				
		padding: 0 12px 12px 12px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.color-palette-title{
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;		
		font-weight: 500;
		.select-color{
			width: 25px;
			height: 25px;
			border-radius: 4px;
		}
	}

	.palette-options{		
		display: flex;
		flex-wrap: wrap;      /* 关键 */
		gap: 6px;
	}

	.theme-palette-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 12px;
		color: #FFF;
		padding: 0;
		width: 48px;
		height: 48px;
		border-radius: 4px;
		transition:transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;
		&:hover{
			transform: translateY(-2px);			
		}
	}
</style>
